<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="main">
		<view class="b-txt-box">
			<view style="font-weight: bold;line-height: 40px;font-size: 32rpx;">
				什么是“联合国17项可持续发展目标”？
			</view>
			<view>
				17项目标提出了我们面临的全球挑战，涵盖贫困、不平等、气候、环境退化、繁荣以及和平与正义等方面。
			</view>
		</view>
		<view class="listBox">
			<u-row v-for="(item,index) in list" :key="index" customStyle="margin-bottom: 40px" align="top">
				<u-col :span="4">
					<u--image :showLoading="true" :src="item.url" width="95%" height="auto" mode="widthFix"></u--image>
				</u-col>
				<u-col :span="8">
					<u--text :text="item.title" bold size="32rpx"></u--text>
					<u-line margin="5px 0" color="#2979ff"></u-line>
					<u--text :text="item.content" lines="4" size="28rpx" color="#66615b"></u--text>
				</u-col>
			</u-row>
		</view>
		<view class="b-txt-box" style="top: -50px;">
			<view style="display: inline;">
				图标及信息资料来源于联合国网站，欲了解详情请点击：
				<u-link href="https://www.un.org/sustainabledevelopment/zh/sustainable-development-goals/"
					text="https://www.un.org/sustainabledevelopment/zh/sustainable-development-goals/"></u-link>
			</view>
			<view>或关注“联合国”微信公众号</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					url: "http://localhost::8989/file/image/C-WEB-Goal-01.png",
					title: "无贫穷",
					content: "在全世界消除一切形式的贫困"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-02.png",
					title: "零饥饿",
					content: "消除饥饿，实现粮食安全，改善营养状况和促进可持续农业 "
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-03.png",
					title: "良好健康与福祉",
					content: "确保健康的生活方式，促进各年龄段人群的福祉"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-04.png",
					title: "优质教育",
					content: "确保包容和公平的优质教育，让全民终身享有学习机会"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-05.png",
					title: "性别平等",
					content: "性别平等不仅是一项基本人权，而且是和平、繁荣和可持续世界的基石"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-06.png",
					title: "清洁饮水和卫生设施",
					content: "为所有人提供水和环境卫生并对其进行可持续管理"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-07.png",
					title: "经济适用的清洁能源",
					content: "确保人人获得负担得起的、可靠和可持续的现代能源 "
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-08.png",
					title: "体面工作和经济增长",
					content: "促进持久、包容和可持续经济增长，促进充分的生产性就业和人人获得体面工作 "
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-09.png",
					title: "产业、创新和基础设施",
					content: "基础设施投资对实现可持续发展至关重要"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-10.png",
					title: "减少不平等",
					content: "减少国家内部和国家之间的不平等 "
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-11.png",
					title: "可持续城市和社区",
					content: "建设包容、安全、有抵御灾害能力和可持续的城市和人类住区"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-12.png",
					title: "负责任消费和生产",
					content: "产业、创新和基础设施"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-13.png",
					title: "气候行动",
					content: "气候变化是跨越国界的全球性挑战 "
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-14.png",
					title: "水下生物",
					content: "保护水下生物"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-15.png",
					title: "陆地生物",
					content: "可持续管理森林，防治荒漠化，制止和扭转土地退化，遏制生物多样性的丧失"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-16.png",
					title: "和平、正义与强大机构",
					content: "让所有人都能诉诸司法，在各级建立有效、负责和包容的机构"
				}, {
					url: "http://localhost::8989/file/image/C-WEB-Goal-17.png",
					title: "促进目标实现的伙伴关系",
					content: "重振可持续发展全球伙伴关系"
				}]
			}
		},
		computed: {},

		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background-color: #FFFFFF;
		padding: 10px;

		.texBox {
			padding: 7%;
			width: 90%;
			margin-right: auto;
			margin-left: auto;
			background-color: rgb(239, 239, 239);
			box-sizing: border-box;
			visibility: visible;
			text-align: justify;
			color: rgb(0, 122, 170);
			visibility: visible;
			line-height: 2em;
			font-size: 14px;
		}

		.listBox {
			padding: 50px 0;
		}

		.b-txt-box {
			margin: 0 auto;
			padding: 20px;
			color: #66615b;
			font-size: 14px;
			border-radius: 10px;
			line-height: 20px;
			border: 1px solid #2979FF;
			position: relative;
			table-layout: fixed;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-all;
		}
	}
</style>
<style lang="scss">
	.b-txt-box{
		text{
			display: inline !important;
		}
	}
</style>
